<template>
	<view class="bg-white" style="min-height: 100vh;"
		:style="{background:'url('+Imgbase+'/brave_goodindex_bgc.png)','background-size':'100%',}">

		<view class="w100 h-1100 card_bgc "
			:style="{background:'url('+Imgbase+'/kp_card_bgc2.png)','background-size':'100% 100%',}">

		</view>

		<view class="zinde">
			<view class="" style="padding: 100rpx 40rpx 0;">
				<image @click="back" class="w-60 h-90 margin-right-20" :src="Imgbase + '/kp_setting_back.png'"
					mode="aspectFit"></image>
				<image class="w-110 h-80" :src="Imgbase + '/kp_card_title.png'" mode="aspectFit"></image>
			</view>

			<view class="w-530 h-80 auto margin-top-30 text-center font-weight-500 black-color font-28"
				style="line-height: 80rpx;"
				:style="{background:'url('+Imgbase+'/kp_card_img1.png)','background-size':'100% 100%',}">
				{{desc.title}}
			</view>
		</view>

		<view class=" flex-between zinde margin-top-50">
			<view class="padding-top-80">
				<image class="w-140 h-100" :src="Imgbase + '/kp_card_img3.png'" mode="aspectFit"></image>
			</view>
			<view class="w-300 h-400 flex-center"
				:style="{background:'url('+Imgbase+'/kp_card_img2.png)','background-size':'100% 100%',}">
				<image class="w-250 h-340" :src="desc.adimage" mode="aspectFit"></image>
			</view>
			<view class="padding-bottom-50">
				<view class="padding-left-30">
					<image class="w-140 h-100 margin-bottom-25" :src="Imgbase + '/kp_card_img4.png'" mode="aspectFit">
					</image>
				</view>
				<!-- <view class="margin-bottom-70 margin-top-70" v-if="liked == 0">
					<image @click="savePoor(did)" class="w-140 h-100" :src="Imgbase + '/kp_card_img5.png'"
						mode="aspectFit"></image>
				</view>
				<view class="margin-bottom-70 margin-top-70" v-if="liked == 1">
					<image @click="unsavePoor(did)" class="w-140 h-100" :src="Imgbase + '/kp_card_img5_c.png'"
						mode="aspectFit"></image>
				</view> -->
				<view class="">
					<button
						style="display: flex;justify-content: center;overflow: hidden;background-color:transparent;margin-top: 15upx;"
						open-type="share">
						<view>
							<image class="w-140 h-100" :src="Imgbase + '/kp_card_img6.png'" mode="aspectFit"></image>
						</view>
					</button>
				</view>
			</view>
		</view>

		<view class="w-720 h-120 auto zinde margin-top-145"
			:style="{background:'url('+Imgbase+'/kp_card_kuang.png)','background-size':'100% 100%',}">
			<view class="padding-15 padding-left-40 padding-right-30">

				<scroll-view scroll-x class="nav w100 fff" scroll-with-animation :scroll-left="scrollLeft"
					style="height: 170upx;overflow: hidden;">

					<view class="text-center jitem fff" v-for="(item,index) in desc.mes" :key="index">
						<view class="">
							<image v-if="item.reword_type_name == 'F'" class="w-120 h-50"
								:src="Imgbase + '/kp_level_F.png'" mode="aspectFit"></image>
							<image v-if="item.reword_type_name == 'Last'" class="w-120 h-50"
								:src="Imgbase + '/kp_level_LAST.png'" mode="aspectFit"></image>
						</view>
						{{Number(item.point/desc.allpoint*100).toFixed(2)}}%
					</view>
				</scroll-view>


			</view>
		</view>

		<view class="padding-80 flex-between btns">
			<view class="">
				<image @click="buy(0)" class="w-180 h-150" :src="Imgbase + '/kp_card_btn1.png'" mode="aspectFit">
				</image>
			</view>
			<view class="">
				<image @click="buy(2)" class="w-240 h-200" :src="Imgbase + '/kp_card_btn2.png'" mode="aspectFit">
				</image>
			</view>
			<view class="">
				<image @click="buy(1)" class="w-180 h-150" :src="Imgbase + '/kp_card_btn3.png'" mode="aspectFit">
				</image>
			</view>
		</view>


		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view style="width: 100%;height: 1200upx;position: absolute;top: 0%;" @tap="hideModal"></view>
			<view class="cu-dialog">
				<view class="padding">
					<view class="fl" style="width: 100rpx;border-radius: 15rpx;overflow: hidden;">
						<image :src="desc.adimage" mode="widthFix"></image>
					</view>
					<view class="fl text-left" style="padding-left: 30rpx;">
						<view class="text-lg" style="color: #e66142;">
							￥{{buymoney}}
						</view>
						<view class="text-sm" style="color: #635120;">
							单价({{desc.cost}}/次)
						</view>
						<view class="text-sm" style="color: #635120;">
							<!-- 购买次数{{buycount}}次 -->
						</view>
					</view>
				</view>
				<view style="clear: both;"></view>
				<view v-if="coupon > 0 && desc.type != '2'" class="padding-sm"
					style="background-color: #E5EEFE;height: 80upx;margin-left: 3%;width: 94%;border-radius: 15upx;margin-bottom: 20rpx;margin-top: 20rpx;">
					<view class="fl">剩余{{coupon}}poke券 (可抵值{{coupon_s}}poke币)</view>
					<view class="fr text-lg" style="color: #e66142;">
						<u-switch v-model="checked" active-color="#19BE6B" @change="radioChange"></u-switch>
					</view>
				</view>
				<view style="width: 100%;height: 20upx;"></view>
				<view style="clear: both;"></view>
				<view class="padding-sm"
					style="background-color: #E5EEFE;height: 80upx;margin-left: 3%;width: 94%;border-radius: 20upx;">
					<view class="fl">需支付</view>
					<view class="fr text-lg" style="color: #e66142;">
						{{buymoney}} poke币
						<!-- <text v-if="desc.type == 2">{{buymoney}}</text> <text v-else>￥{{buymoneys}}</text>
						<text v-if="desc.type == 2"></text> <text v-else>poke币</text> -->
					</view>
				</view>
				<view class="cu-bar">
					<view class="action flex-sub  padding-top-20" style="min-height: 100rpx;" @tap="createOrde()">
						<image :src="Imgbase + '/kp_gr_buybtn.png'" mode="aspectFit"
							style="width: 500rpx;height: 100rpx;">
						</image>
					</view>
				</view>
				<view style="clear: both;"></view>
				<view style="width: 100%;height: 60upx;"></view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				id: 0,
				desc: [],
				liked: 0,
				modalName: null,
				buymoney: 0,
				times: -1
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
			this.poordesc()
			this.isSave()
		},
		//分享功能
		onShareAppMessage(res) {
			let _this = this;
			return {
				title: _this.desc.title,
				path: '/pages/card/detail?id=' + _this.id,
				imageUrl: 'https://yzcos.oqzhs.cn/brave/yonglogo.png',
			}
		},
		methods: {
			buy(e) {
				this.modalName = 'bottomModal';
				this.times = e
				if (e == 0) {
					this.buymoney = this.desc.cost
				}
				if (e == 1) {
					this.buymoney = this.desc.cost * 10
				}
				if (e == 2) {
					this.buymoney = this.desc.cost * this.desc.number 
				}
			},
			hideModal() {
				this.modalName = null
			},
			isSave() {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Infinite/isSave',
					data: {
						token: uni.getStorageSync('token'),
						id: _this.id
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.data.count == 0) {
							_this.liked = 0;
						} else {
							_this.liked = 1;
						}
					}
				});
			},
			back() {
				uni.navigateBack()
			},
			// 获取奖池
			async poordesc() {
				let _this = this
				let item = await this.$api.post('infinite/poordesc', {
					token: uni.getStorageSync('token'),
					id: _this.id
				})
				this.desc = item.data.desc
			},
			// 抽奖
			async createOrde(e) {
				let _this = this
				let item = await this.$api.post('infinite/createOrder', {
					token: uni.getStorageSync('token'),
					good_poor_id: _this.id,
					ver: _this.$mpVer,
					times: _this.times,
					good_type: 'cards'
				})
				this.desc = item.data.desc
				uni.showToast({
					icon: 'success',
					title: '购买成功'
				});
				this.modalName = null;
			},
			savePoor(id) {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Infinite/savePoor',
					data: {
						token: uni.getStorageSync('token'),
						goods_poor_id: this.id,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
						}
						if (res.data.code == '1') {
							uni.showToast({
								icon: 'success',
								title: '添加收藏成功'
							});
							_this.liked = 1;
						}
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				});
			},
			unsavePoor(id) {
				let _this = this;
				uni.request({
					url: _this.$globals.apibase + '/api/Infinite/unsavePoor',
					data: {
						token: uni.getStorageSync('token'),
						goods_poor_id: this.id,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
						}
						if (res.data.code == '1') {
							uni.showToast({
								icon: 'success',
								title: '取消收藏成功'
							});
							_this.liked = 0;
						}
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				});
			},
		},
	}
</script>

<style lang="less" scoped>
	button::after {
		border: none;
	}

	.btns {
		position: fixed;
		bottom: 10rpx;
		z-index: 999;
	}

	.jitem {
		display: inline-block;
		margin-right: 60rpx;
	}


	.zinde {
		position: relative;
		z-index: 10;
	}

	.card_bgc {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.auto {
		margin: 0 auto;
	}
</style>